<template>
	<div class="team-info-page">
		<div class="module-row">
			<!--代理人列表-->
			<div class="module-item">
				<div class="module-title">代理人搜索</div>
				<!-- 搜索条件form表单 -->
				<h-form :model="formItem" :label-width="0" class="search-form" cols="2">
					<h-form-item label="">
						<h-input v-model="formItem.scenarioName" placeholder="请输入"></h-input>
					</h-form-item>
					<h-form-item :label-width="10">
						<h-button style="margin-right:8px;" type="primary" @click="formSearch">查询</h-button>
						<h-button type="ghost" @click="resetClickFn">重置</h-button>
					</h-form-item>
				</h-form>
				<div class="table-page">
					<!-- 表格和分页 -->
					<common-table ref="commonTable" :tableConfig="tableConfig" @currentChange="currentChange" @pageSizeChange="pageSizeChange"
							@selectionChange="selectionChange" :border="false" :hasPage="false"></common-table>
				</div>
			</div>
			<div class="module-item">
				<div class="module-title">团队排行榜</div>
				<div class="ranking-list">
					<div class="ranking-item" v-for="(item, index) in teamRankingList" :key="index">
						<svg-icon v-if="index < 3" :iconClass="'top' + (index + 1)" class="icon"></svg-icon>
						<div v-else class="ranking-index">{{index + 1}}</div>
						<div class="ranking-item-name">{{item.title}}</div>
						<div class="ranking-item-number">{{item.number}}</div>
					</div>
				</div>
			</div>
			<div class="module-item">
				<div class="module-title">代理人排行榜</div>
				<div class="ranking-list">
					<div class="ranking-item" v-for="(item, index) in agentRankingList" :key="index">
						<svg-icon v-if="index < 3" :iconClass="'top' + (index + 1)" class="icon"></svg-icon>
						<div v-else class="ranking-index">{{index + 1}}</div>
						<div class="ranking-item-name">{{item.title}}</div>
						<div class="ranking-item-number">{{item.number}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="module-row second-row">
			<div class="module-item">
				<div class="nav-bar">
					<div class="nav-item" :class="{active: activeBar === 1}"  @click="setActiveBar(1)">累计销售金额</div>
					<div class="nav-item" :class="{active: activeBar === 2}" @click="setActiveBar(2)">累计服务客户数</div>
				</div>
				<div class="area-title">{{activeBar === 1 ? '金额' : '人'}}</div>
				<area-chart :chartData="areaData"></area-chart>
			</div>
			<div class="module-item">
				<div class="module-title">各省份情况</div>
				<div class="map-wrap">
					<div class="data-desc">
						<div class="data-desc-inner">
							<div
								v-for="(item, index) of mapData" :key="index"
								class="data-item">
								<span class="name">{{item.name}}</span>
								<span>{{item.value}}万元</span>
							</div>
						</div>
					</div>
					<div class="map-chart-box">
						<map-chart :chartData="areaData"></map-chart>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import CommonTable from '@/components/common/common-table.vue'
import AreaChart from '@/components/common/antv/area-chart'
import MapChart from '@/components/common/antv/map-chart'
import tableMixin from '@/mixins/table'
export default {
	name: 'TeamInfo',
	mixins: [tableMixin],
	components: {
		CommonTable,
		AreaChart,
		MapChart
	},
	data() {
		return {
			activeBar: 1,
			formItem: {},
			// 表格配置
			tableConfig: {
				total: 0,
				pageNo: 1,
				pageSize: 10,
				tData: [
					{ jobCode: '13384', team: '保障先锋队', name: '李晓晴' },
					{ jobCode: '13596', team: '风险护卫者', name: '张伟民' },
					{ jobCode: '13808', team: '安心精英团', name: '王梦琪' },
					{ jobCode: '14020', team: '安全舵手', name: '刘浩然' },
					{ jobCode: '14232', team: '保险领航者', name: '陈子涵' },
					{ jobCode: '14444', team: '稳健之翼', name: '赵佳怡' },
					{ jobCode: '14656', team: '信守协奏', name: '黄思宇' },
					{ jobCode: '14868', team: '护盾行动组', name: '周晓慧' },
					{ jobCode: '15080', team: '金钟罩团队', name: '徐浩然' },
					{ jobCode: '15292', team: '策略守护者', name: '郭雅婷' },
					{ jobCode: '15504', team: '风创团队', name: '王绮恒' },
				],
				tColumns: [
					{
						title: '代理人工号',
						key: 'jobCode'
					},
					{
						title: '所属团队',
						key: 'team',
					},
					{
						title: '姓名',
						key: 'name'
					},
				],
			},
			teamRankingList: [
				{ title: '保障先锋队', number: '500'},
				{ title: '风险护卫者', number: '400'},
				{ title: '安心精英团', number: '300'},
				{ title: '安全舵手', number: '200'},
				{ title: '保险领航者', number: '200'},
				{ title: '稳健之翼', number: '200'},
				{ title: '信守协奏', number: '200'},
				{ title: '护盾行动组', number: '200'},
				{ title: '金钟罩团队', number: '200'},
				{ title: '策略守护者', number: '200'}
			],
			agentRankingList: [
				{ title: '李明轩', number: '500'},
				{ title: '张雅婷', number: '400'},
				{ title: '王思远', number: '300'},
				{ title: '刘昊天', number: '200'},
				{ title: '陈瑞华', number: '200'},
				{ title: '赵晓宇', number: '200'},
				{ title: '黄慧心', number: '200'},
				{ title: '周嘉宁', number: '200'},
				{ title: '徐文昊', number: '200'},
				{ title: '郭晓阳', number: '200'}
			],
			// 面积图数据
			areaData: [
				{ type: '1', value: 5 },
				{ type: '2', value: 20 },
				{ type: '3', value: 35 },
				{ type: '4', value: 46 },
				{ type: '5', value: 56 },
				{ type: '6', value: 66 },
				{ type: '7', value: 71 },
				{ type: '8', value: 80 },
				{ type: '9', value: 89 },
				{ type: '10', value: 93 },
				{ type: '11', value: 102 },
				{ type: '12', value: 110 }
			],
			// 地图数据
			mapData: [
				{ name: '江西省', value: 23987 },
				{ name: '广东省', value: 37262 },
				{ name: '河北省', value: 6297 },
				{ name: '山东省', value: 28765 }
			]
		}
	},
	methods: {
		setActiveBar(type) {
			this.activeBar = type
		}
	}
}
</script>

<style lang="scss" scoped>
.team-info-page{
	background: #f0f2f5;
	min-height: 100%;
	padding: 8px 16px 0px;
	color: #434343;
	.module-row{
		display: flex;
		padding-bottom: 16px;
		&.second-row{
			.module-item{
				height: 394px;
			}
		}
		.module-item{
			flex: 1;
			margin-left: 16px;
			background: #FFFFFF;
			border-radius: 8px;
			height: 530px;
			padding: 16px 20px 0 20px;
			&:nth-child(1) {
				margin-left: 0;
			}
			.module-title{
				font-size: 16px;
				color: #333333;
				font-weight: bold;
				line-height: 1;
			}
			.search-form{
				margin: 20px 0 10px;
				/deep/ .h-form-item{
					padding: 0px;
				}
			}
			.ranking-list{
				.ranking-item{
					display: flex;
					align-items: center;
					margin-top: 20px;
					line-height: 26px;
					.icon{
						width: 26px;
						height: 26px;
					}
					.ranking-index{
						width: 26px;
						height: 26px;
						line-height: 26px;
						text-align: center;
						border-radius: 100%;
						background-image: linear-gradient(180deg, #F4F4F4 0%, rgba(243,243,243,0.08) 100%);
					}
					.ranking-item-name{
						font-size: 16px;
						color: #555555;
						flex: 1;
						margin-left: 20px;
					}
					.ranking-item-number{
						width: 60;
					}
				}
			}
			.area-title{
				color: #636363;
				font-size: 16px;
				margin-bottom: 14px;
			}
			.nav-bar{
				display: flex;
				margin-bottom: 24px;
				.nav-item{
					margin-right: 30px;
					font-size: 16px;
					color: #767676;
					cursor: pointer;
					&.active{
						color: #4686F2;
						font-weight: bold;
						border-bottom: 2px solid rgba(41,141,255,1);
					}
				}
			}
			.map-wrap{
				display: flex;
				.data-desc{
					margin-left: 30px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.data-desc-inner{
						background: #F1F8FF;
						border: 1px solid rgba(146,189,255,1);
						border-radius: 8px;
						padding: 0 25px;
						padding: 10px 25px;
						.data-item{
							line-height: 30px;
							display: flex;
							.name{
								margin-right: 20px;
							}
						}
					}
				}
				.map-chart-box{
					flex:1;
					/deep/ .l7-control-logo{
						display: none;
					}
				}
			}
		}
	}
}
</style>